<template>
  <view class="tab-content">
    <view v-if="noData" class="no-data">暂无查到数据</view>
    <view v-else class="vehicle-info">
      <view class="info-row" v-for="(label, key) in labels" :key="key">
        <text class="vehiclelabel">{{ label }}</text>
        <text class="vehiclevalue">
          {{ annualInspectionData[key] || "暂无数据" }}
        </text>
      </view>
    </view>
  </view>
</template>

<script>
import { getVehicleQuery } from "@/common/api/hub_ygzw/vehicle/vehicle.js";

export default {
  props: ["vehicleData"],
  data() {
    return {
      annualInspectionData: {},
      noData: false,
      labels: {
        inspectyear: "审验年度",
        startdate: "应审验日期",
        inspectdate: "审验日期",
        effectivedate: "有效日期至",
        state: "审验状态",
        inspector: "审验人",
      },
    };
  },
  created() {
    this.getAnnualInspectionInfo();
  },
  methods: {
    getAnnualInspectionInfo() {
      const params = {
        funcType: "QB0105",
        vehicleNo: this.vehicleData.vehicleNo,
        plateColorCode: this.vehicleData.plateColorCode,
        provinceCode: "",
      };
      getVehicleQuery(params)
        .then((res) => {
          if (res.statusCode === 200) {
            if (
              res.data.pageInfo.totalpages === 0 ||
              !res.data.data ||
              !res.data.data.vehicleInfo ||
              res.data.data.vehicleInfo.length === 0
            ) {
              this.noData = true;
            } else {
              this.annualInspectionData = res.data.data.vehicleInfo[0];
              console.log(
                JSON.stringify(this.annualInspectionData),
                "年度审验信息======"
              );
              this.noData = false;
            }
          }
        })
        .catch((error) => {
          console.error("获取年度审验信息失败:", error);
          this.noData = true;
        });
    },
  },
};
</script>

<style scoped lang="scss">
.tab-content {
  .no-data {
    text-align: center;
    color: #79829c;
    padding: 20px;
    font-size: 16px;
  }
  .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .vehiclelabel {
      color: #79829c;
    }
    .vehiclevalue {
      color: #0d1444;
    }
  }
}
</style>
